<template>
  <div class="g2-container">
    <!-- 轮播图 -->
    <homeCarousel :list="bannerList"></homeCarousel>
    <!-- 首页nav -->
    <homeCourses></homeCourses>
    <!-- 推荐课程 -->
    <homeRecLesson :resetData="recommendList" @player="player"></homeRecLesson>
  </div>
</template>

<script type="babel">
import homeCarousel from "~/components/home/home-carousel";
import homeCourses from "~/components/home/home-nav";
import homeRecLesson from "~/components/home/lesson-experts-recommend";

export default {
  components: {
    homeCarousel,
    homeCourses,
    homeRecLesson
  },

  async asyncData(context) {
    debugger
    let bannerData = await context.$axios.get(
      "/lt-order/logonless/query_banner_for_pc.do",
      {}
    );
    let bannerList = (data => {
      // 处理 Banner
      if (bannerData.respCode !== "0") {
        return [];
      }
      return data.result;
    })(bannerData);

    // 初始化就加载一下 专家推荐课程
    let loadRecommendLesson = async () => {
      let { respCode, respMsg, result } = await context.$axios.post(
        "/lt-order/logonless/select_lesson_byname_page.do",
        {
          mainlyFlag: "y",
          page: {
            currentPage: 1,
            pageNumber: 10
          }
        }
      );
      // 处理 Banner
      if (respCode !== "0") {
        return [];
      }
      return result.list;
    };
    let recommendList = await loadRecommendLesson();

    return {
      bannerList,
      recommendList
    };
  },
  data() {
    return {
      isFinish: false,
      isLoading: false,
      pageIndex: 1,
      pageSize: 10,

      bannerList: [],
      recommendList: []
    };
  },
  computed: {
    lists() {
      return this.list;
    }
  },
  methods: {
    fetch() {
      this.$request
        .get(`/list?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`)
        .then(res => {
          console.log("res", res);
          if (res.data.list && res.data.list.length) {
            this.total = res.data.total;
            this.list = this.list.concat(res.data.list);
          } else {
            this.isFinish = true;
          }
          this.isLoading = false;
        });
    },
    loadPage() {
      if (!this.isFinish && !this.isLoading) {
        this.isLoading = true;
        this.pageIndex++;
        setTimeout(() => {
          this.fetch();
        }, 1500);
      }
    }
  },
  mounted() {
    window.addEventListener(
      "scroll",
      () => {
        this.loadPage();
      },
      false
    );
  }
};
</script>
<style>
</style>

